<template>
	<div :id="model.id" class="video warp" :class="[`terminal${terminal}`, `pos-${model.data.positionValue}`]">
		<div class="textBox text-top" v-if="model.data.content && model.data.content != '<p><br></p>'" >
			<div v-html="model.data.content"></div>
		</div>
		<div class="videoBox">
			<video :src="model.data.url" controls :autoplay="model.data.autoplay" :loop="model.data.loop" :poster="model.data.poster"></video>
		</div>
		<div class="textBox text-bottom" v-if="model.data.content && model.data.content != '<p><br></p>'" >
			<div v-html="model.data.content"></div>
		</div>
	</div>
</template>

<script lang="ts">
	import { toRefs, reactive } from 'vue';
	export default {
		name: 'video-basics',
		props: {
			terminal: {
				type: Number,
				default: 1
			},
			model: {
				type: Object
			}
		},
		setup(props) {
			const state = reactive({
				terminal: props.terminal,
				model: props.model,
			});
			
			return {
				...toRefs(state),
			};
		}
	}
</script>

<style lang="scss" scoped>
	.video {
		padding: 0 10px;
		display: block;
		justify-content: flex-start;
		align-items: center;

		.videoBox {
			width: 100%;
			video {
				width: 100%;
			}
		}
		.textBox{
			width: 100%;
			text-align: center;
		}
		
		&.pos-top {
			.text-top{
				display: block;
			}
			.text-bottom {
				display: none;
			}
		}
		
		&.pos-bottom {
			.text-top{
				display: none;
			}
			.text-bottom {
				display: block;
			}
		}
			
	}

</style>
